<template>
  <div>
      <div>
          <p @click="fun()" class="goback"><span>&lt;</span>{{arr1.title}}</p>
      </div>
      <img :src="arr1.imgfirst">
      <p>{{arr1.flolanguage}}</p>
      <img :src="arr1.infoimg3">
      <img :src="arr1.infoimg4">
      <div class="giftgoods">
              <img :src="arr1.imgfirst">
            <div class="giftgoods-right" @click="fan(arr1.flowerId)">
                <h4>{{arr1.title}}</h4>
                <span>{{arr1.nowprice}}</span>
                <p>立即查看</p>
          </div>
      </div>
  </div>
</template>

<script>
import {getlink} from "@/api/getapi.js"
export default {
    data(){
        return {
            arr:[],
            arr1:[]
        }
    },
    mounted(){
    getlink("/demo/typeinfo").then((ok)=>{
      console.log(ok.data);
      this.arr = ok.data.typeflower
      console.log(this.newarr)
      console.log(this.arr1)
    })
  },
  methods:{
        fun(){
            this.$router.go(-1)
        },
    fan(id){
        this.$router.push({name:"Flowerinfo",query:{flowerId:id}})
    }
    },
  computed:{
        newarr(){
            return this.arr.map((v)=>{
                if(v.flowerId==this.$route.params.xiaoming){
                    this.arr1=v
                    return v
                }
            })
        }
    }
}
</script>

<style scoped>
    div{
        font-size: 0.16rem;
    }
    img{
        width: 100%;
    }
    .goback{
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.2rem;
    }
    .goback span{
        margin: 0 0.2rem;
        color: red;
    }
    .giftgoods{
        border: 2px solid red;
        padding: 0.1rem;
        display: flex;
        justify-content: space-between;
    }
    .giftgoods img{
        width: 1rem;
    }
    .giftgoods-right{
        text-align: right;
    }
    .giftgoods-right h4{
        margin-bottom: 0.6rem;
    }
    .giftgoods-right span{
        color: red;
        font-weight: 700;
    }
    .giftgoods-right p{
        margin-top: 0.1rem;
        background-color: red;
        color: white;
        padding: 0.02rem 0.08rem;
        border-radius: 5px;
    }
</style>